<template>
    <div class="person">
        <h1>
            情况三:监视(reactive)定义的对象数据类型,会默认开启深度监视
        </h1>
        <h2>当前求和为{{ person.name }}</h2>
        <h2>当前求和为{{ person.age  }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改整个人</button>
        
        <hr>
        <h2>测试:{{ a.b.c.d }}</h2>
        <button @click="test">测试</button>
    </div>
</template>
<script lang="ts" setup name='Person'>
import { reactive, ref, watch } from "vue";
let person = reactive({
    name: "GG"
    ,age:20
})
let a = reactive({
    b: {
        c: {
            d:999
        }
    }
})

function changeName() {
   person.name += "~~"
}
function changeAge() {
    person.age += 1
}
function changePerson() {
    Object.assign(person,{name:"XX",age:11})
}
function test() {
    a.b.c.d = 666
}
/* 
    监视reactive的值会自动开启深层监视,只要是对象内的数据进行了变化,都会进行监视

    因为reactive无法对其进行深复制的原因,所以我们使用assgin的方法进行对象的值的重新赋值后
    其实原理上还是浅复制,单纯的把变量塞新的数据进去,但是数据地址还是不变的
    所以我们的点击变整个人后,我们监视的新值和旧值都是一样的
*/
const stopWatch = watch(person, (newValue, oldValue) => {
    console.log("person发生了变化", newValue, oldValue);
},{deep:true})
        
</script>
<style scoped>
/*  组件的样式 */
    .person{
            /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }


</style>
